<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="lib/angular/angular.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body>
  <nav id="main-nav" class="main-nav">
    <a href="#">Home</a>
    <a href="#">My Games</a>
 </nav>
 <div id="page-wrap" class="page-wrap">
   <header id="main-header" class="main-header">
     <!-- TODO fix this by either figuring out how angularjs and anchors can play nicely or extract the js -->
     <div id="open-menu" class="open-menu" onClick="document.getElementById('main-nav').style.width='20%'; document.getElementById('page-wrap').style.width='80%'; document.getElementById('main-header').style.width='80%'; document.getElementById('main-header').style.left='20%'; document.getElementById('close-menu').style.display='block'; document.getElementById('open-menu').style.display='none';">☰</div>
     <div id="close-menu" class="close-menu" onClick="document.getElementById('main-nav').style.width='0%';  document.getElementById('page-wrap').style.width='100%'; document.getElementById('main-header').style.width='100%'; document.getElementById('main-header').style.left='0%'; document.getElementById('close-menu').style.display='none'; document.getElementById('open-menu').style.display='block';">☰</div>
     <h1>Copa</h1>
   </header>
   <div class="content " ng-app="copa" ng-controller="PhoneListCtrl">
      <div ng-view></div>
    </div>
  </div>
</body>
</html>
